<template>
  <div>
    <van-cell-group>
      <van-field
        v-model="monicker"
        label="请输入驾校"
        placeholder="请输入驾校"
      />

      <div v-if="conceal" class="watch-list">
        <div
          v-for="(item, index) in list"
          :key="index"
          @click="pitchOn(item.id, item.name)"
        >
          {{ item.name }}
        </div>
      </div>

      <van-field
        v-model="instructor"
        label="请输入教练"
        placeholder="请输入教练"
      />
    </van-cell-group>

    <!-- 性别 -->
    <div class="ce_basic">
      <p>性别</p>
      <select v-model="set" class="ce_type">
        <option value>不限</option>
        <option value="0">男</option>
        <option value="1">女</option>
      </select>
    </div>

    <!-- 年龄段 -->
    <div class="ce_basic">
      <p>教龄段</p>
      <select v-model="schoolAge" class="ce_type">
        <option value>不限</option>
        <option value="0">0~3</option>
        <option value="3">3~5</option>
        <option value="5">5~10</option>
        <option value="10">10以上</option>
      </select>
    </div>

    <!-- 年龄段 -->
    <div class="ce_basic">
      <p>年龄段</p>
      <select v-model="age" class="ce_type">
        <option value>不限</option>
        <option value1="20">20~30</option>
        <option value1="30">30~40</option>
        <option value1="40">40~50</option>
        <option value1="50">50~60</option>
      </select>
    </div>

    <!-- 起始日期-->
    <van-cell is-link @click="showTime">
      <div class="showTime">
        <div>起始日期</div>
        <p>{{ startTime }}</p>
      </div>
    </van-cell>
    <van-popup
      round
      v-model="showtime"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        @confirm="startAffirm"
        @cancel="startCcancel"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>

    <van-cell is-link @click="hideTime">
      <div class="showTime">
        <div>结束日期</div>
        <p>{{ endTime }}</p>
      </div>
    </van-cell>
    <van-popup
      round
      v-model="endtime"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="endcurrentDate"
        @confirm="endAffirm"
        @cancel="endCcancel"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <!-- 预约时段 -->
    <!-- <div class="ce_basic">
      <p>预约时段</p>
      <select v-model="yysd" class="ce_type">
        <option value="">请选择</option>
        <option value="05:00-08:00">05:00 - 08:00</option>
        <option value="08:00-11:00">08:00 - 11:00</option>
        <option value="11:00-14:00">11:00 - 14:00</option>
        <option value="14:00-17:00">14:00 - 17:00</option>
        <option value="17:00-20:00">17:00 - 20:00</option>
        <option value="20:00-22:00">20:00 - 22:00</option>
      </select>
    </div> -->

    <!-- 起始时间  时分 -->
    <van-cell is-link @click="StarTime">
      <div class="showTime">
        <div>起始时间段</div>
        <p>{{ currentTime }}</p>
      </div>
    </van-cell>
    <van-popup
      round
      v-model="startingTime"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentTime"
        @confirm="startAffirms"
        @cancel="startCcancels"
        type="time"
        title="选择时间"
      />
    </van-popup>

    <!-- 结束时间段 -->
    <van-cell is-link @click="StarTimes">
      <div class="showTime">
        <div>结束时间段</div>
        <p>{{ currentTimes }}</p>
      </div>
    </van-cell>
    <van-popup
      round
      v-model="startingTimes"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="currentTimes"
        @confirm="startAffirmss"
        @cancel="startCcancelss"
        type="time"
        title="选择时间"
      />
    </van-popup>

    <!-- 准驾车型 -->
    <!-- <div style="background:#fff;" class="ce_basic">
      <p>准驾车型</p>
      <select v-model="typeCar" class="ce_type">
        <option value="A1">A1</option>
        <option value="A2">A2</option>
        <option value="A3">A3</option>
        <option value="B1">B1</option>
        <option value="B2">B2</option>
        <option value="C1">C1</option>
        <option value="C2">C2</option>
        <option value="C3">C3</option>
        <option value="C4">C4</option>
        <option value="D">D</option>
        <option value="E">E</option>
        <option value="F">F</option>
        <option value="M">M</option>
        <option value="N">N</option>
        <option value="P">P</option>
      </select>
    </div> -->

    <!-- 连续预约 -->
    <div class="ce_basic">
      <p>课程时长</p>
      <select v-model="num" class="ce_type">
        <option value="0">请选择</option>
        <option value="1">1节课</option>
        <option value="2">2节课</option>
        <option value="3">3节课</option>
        <option value="4">4节课</option>
      </select>
    </div>

    <!-- 预约科目 -->
    <div class="ce_basic">
      <p>科目</p>
      <select v-model="km" class="ce_type">
        <option value="2">科二</option>
        <option value="3">科三</option>
      </select>
    </div>

    <div class="finger-tip">
      <div @click="confirm">查询</div>
      <div @click="href('/TrainingRecord')">约车列表</div>
    </div>
    <!-- 只能约车列表 -->

    <div v-for="(item, index) in CoreeList" :key="index" class="stratosphere">
      <div class="material">
        <div>
          <div>日期：</div>
          <p>{{ item.yctime }}</p>
        </div>
        <div>
          <div>约课时段：</div>
          <p>{{ item.begintime }} ~ {{ item.endtime }}</p>
        </div>
      </div>
      <div class="material">
        <div>
          <div>教练：</div>
          <p>{{ item.name }}</p>
        </div>
        <div>
          <div>车型：</div>
          <p>{{ item.cx }}</p>
        </div>
      </div>
      <div class="material">
        <div>
          <div>培训方式：</div>
          <p>实操</p>
        </div>
        <div>
          <div>价格：</div>
          <p>￥{{ item.classNum }}x{{ item.price / item.classNum }}</p>
        </div>
      </div>
      <div @click="abolish(item.id)" class="btn-abrogate">取消</div>
    </div>

    <van-popup round v-model="show">
      <div class="have-already">
        <div class="ha-title">您已预约</div>
        <div v-for="(item, index) in CoreeList" :key="index" class="ha-details">
          <p>{{ item.name }}</p>
          <div>
            <span>{{ item.yctime }}</span
            >： {{ item.begintime }} ~ {{ item.endtime }}
          </div>
        </div>

        <div @click="ascertain">确定</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  basicInformation,
  AboutCar,
  VehicleModel,
  callOff
} from "../../../assets/js/api/user";
//
import { globalSSearch } from "../../../assets/js/api/apply";
import { Toast, Dialog } from "vant";
export default {
  name: "intelligent",
  data() {
    return {
      monicker: "",
      instructor: "", // 教练名字
      showtime: false, // 起始时间是否弹出
      startTime: "", // 起始时间
      minDate: new Date(2020, 8, 9),
      maxDate: new Date(2222, 12, 30),
      currentDate: new Date(),
      endcurrentDate: new Date(),
      // 截止时间
      ListItem: [],
      endTime: "",
      conceal: true, // 当需要输入驾校名称时显示
      endtime: false, // 结束时间
      typeCar: "", // 准假车型
      condition: true,
      typeList: [], // 车型下拉框
      list: [], //只能约车列表
      id: "", // 驾校编号
      set: "", // 性别
      age: "", // 年龄段
      schoolAge: "", // 教龄段
      num: "0", // 连续预约数量 "0": 1：请选择；1节课；2：2节课；3：三节课；4：四节课
      show: false, // 弹出层
      CoreeList: [], //弹出层展示
      km: "2", // 预约的科目
      record: 0, // 用来记录搜索驾校师傅已经点击过
      yysd: "", // 预约时段
      startingTime: false, // 起始时间
      currentTime: "", // 起始时间的时间

      startingTimes: false, // 结束时间
      currentTimes: "" // 结束时间的时间
    };
  },

  watch: {
    monicker() {
      if (this.monicker == "") {
        this.conceal = false;
        // this.record = 0;
        return;
      }
      if (this.record == 0) {
        this.conceal = true;
      } else {
        this.conceal = false;
      }
      let obj = {
        type: "1",
        keyWord: this.monicker
      };
      globalSSearch(obj).then(res => {
        // this.conceal = true;
        this.list = res.data;
      });
    }
  },

  created() {
    VehicleModel().then(res => {
      if (res.code == 0) {
        this.type = res.data;
      }
    });
    // 驾校详情
    basicInformation().then(res => {
      // console.log(res);
      this.typeCar = res.data.zjcx;
      // this.monicker = res.data.jxname;
      // this.id = res.data.jgbh;
      // this.conceal = false;
    });
  },

  methods: {
    // 起始时间段
    StarTime() {
      this.startingTime = true;
    },
    startAffirms() {
      this.startingTime = false;
    },
    startCcancels() {
      this.startingTime = false;
      // console.log("取消");
    },
    // 结束时间段
    StarTimes() {
      this.startingTimes = true;
    },
    startAffirmss() {
      this.startingTimes = false;
    },
    startCcancelss() {
      this.startingTimes = false;
      // console.log("取消");
    },

    pitchOn(id, name) {
      this.id = id;
      this.monicker = name;
      this.conceal = false;
    },
    // 查询
    confirm() {
      if (this.monicker == "") {
        this.id = "";
      }
      let obj = {
        q_ssjx: this.id,
        name2: this.instructor,
        q_sex: this.set,
        q_jage: this.schoolAge,
        q_age: this.age,
        starttime2: this.startTime,
        endtime2: this.endTime,
        cx: this.typeCar,
        lxyynum: this.num,
        km: this.km,
        yysd: `${this.currentTime}-${this.currentTimes}`
      };
      // console.log(obj);

      AboutCar(obj).then(res => {
        console.log(res);
        if (res.code == 0) {
          if (res.data.code == 4) {
            Toast.fail("您的账户余额不足，请充值后重试");
            return;
          }
          if (res.data.data.length != 0) {
            this.show = true;
            this.CoreeList = res.data.data;
          }
          if (res.code == 503) {
            Toast.fail("一天只能预约四次");
          }

          if (res.data.data.length == 0) {
            Dialog.alert({
              message: "未查询到有关教练"
            }).then(() => {
              // on close
            });
          }
        }
      });
    },

    // 约课记录取消
    abolish(id) {
      callOff(id).then(res => {
        // console.log(res);
        Dialog.confirm({
          message: "确认取消"
        })
          .then(() => {
            // on confirm
            if (res.code == 0) {
              for (let i = 0; i < this.CoreeList.length; i++) {
                if (id == this.CoreeList[i].id) {
                  Toast.success("取消成功");
                  this.CoreeList.splice(i, 1);
                }
              }
            }
          })
          .catch(() => {
            // on cancel
          });
      });
    },

    // 起始时间
    startAffirm() {
      var myDate = this.currentDate;
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = myDate.getDate(); //获取当前日(1-31)
      // let hour = myDate.getHours();
      // let minute = myDate.getMinutes();
      if (month < 10) {
        month = `0${month}`;
        // console.log(month);
      }
      // if (hour < 10) {
      //   hour = `0${hour}`;
      // }
      // if (minute < 10) {
      //   minute = `0${minute}`;
      // }
      if (day < 10) {
        day = `0${day}`;
        // console.log(day);
      }
      //  ${hour}:${minute}
      this.startTime = `${year}-${month}-${day}`;
      this.showtime = false;
      // console.log(this.startTime);
    },
    startCcancel() {
      this.showtime = false;
    },

    // 截止时间
    endAffirm() {
      var myDate = this.endcurrentDate;
      let year = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
      let month = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
      let day = myDate.getDate(); //获取当前日(1-31)
      // let hour = myDate.getHours();
      // let minute = myDate.getMinutes();
      if (month < 10) {
        month = `0${month}`;
        // console.log(month);
      }
      // if (hour < 10) {
      //   hour = `0${hour}`;
      // }
      // if (minute < 10) {
      //   minute = `0${minute}`;
      // }

      if (day < 10) {
        day = `0${day}`;
        // console.log(day);
      }
      //  ${hour}:${minute}
      this.endTime = `${year}-${month}-${day}`;
      // console.log(this.endTime);
      this.endtime = false;
    },
    endCcancel() {
      this.endtime = false;
    },
    // 结束时间

    // 弹出层关闭
    ascertain() {
      this.show = false;
      Dialog.alert({
        message: "预约成功，如需取消请提前2小时操作"
        // theme: "round-button"
      }).then(() => {});
    },

    // 起始时间
    showTime() {
      this.showtime = true;
    },
    // 截止时间
    hideTime() {
      this.endtime = true;
    },
    href(url) {
      this.$router.push({ path: url });
    }
  },

  components: {
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style></style>
